<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双飞翼布局示例</title>
    <style>
      .container {
        display: flex;
      }

      .left,
      .right {
        width: 200px; /* 固定宽度 */
        background-color: #f2f2f2;
      }

      .middle {
        flex-grow: 1; /* 宽度自适应 */
        margin-left: 200px; /* 左侧margin等于左侧列的宽度 */
        margin-right: 200px; /* 右侧margin等于右侧列的宽度 */
        background-color: #e6e6e6;
      }

      .middle-content {
        /* 这里的margin用于抵消左右两侧的margin，防止中间内容被遮挡 */
        margin-left: -200px; /* 左侧margin的负值等于左侧列的宽度 */
        margin-right: -200px; /* 右侧margin的负值等于右侧列的宽度 */
        padding: 0 200px; /* 这里的padding用于确保中间内容的左右边距与两侧列对齐 */
      }
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      .claerfix {
        *zoom: 1; /*兼容IE低版本*/
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">左侧内容</div>
      <div class="middle">
        <div class="middle-content">中间内容</div>
      </div>
      <div class="right">右侧内容</div>
    </div>
  </body>
</html>
